<template>
	<div class="need-detail-container">
		<el-card class="box-card">
			<div slot="header" class="clearfix">
				<span>埋点需求信息（ID：{{this.id}}）</span>
				<span class="link" @click="handleOpenDialog">公共属性</span>
			</div>
			<div>
				<div class="steps-content">
					<el-steps :active="stepActive" finish-status="success" align-center>
						<el-step
							:description="item.label"
							v-for="(item) in $requirementStatusList"
							:key="item.value"
							:title="handleStepTitle(item)">
						</el-step>
					</el-steps>
				</div>
				<el-form ref="form" :model="form" label-width="110px" size="mini" disabled>
					<el-row>
						<el-col :span="8">
							<el-form-item label="栏目:">
								<el-input v-model="form.bizName"></el-input>
							</el-form-item>
						</el-col>
						<el-col :span="8">
							<el-form-item label="系统版本">
								<el-select v-model="form.versionId" placeholder="请选择版本">
									<el-option
										v-for="item in versionList"
										:label="item.version"
										:key="item.id"
										:value="item.id">
									</el-option>
								</el-select>
							</el-form-item>
						</el-col>
						<el-col :span="8">
							<el-form-item label="埋点SDK类型:">
								<el-input :value="$sdkTypeObj[form.sdkType]"></el-input>
							</el-form-item>
						</el-col>
						<el-col :span="8">
							<el-form-item label="需求名称:">
								<el-input v-model="form.requirementName"></el-input>
							</el-form-item>
						</el-col>
						<el-col :span="8">
							<el-form-item label="应用:">
								<el-input v-model="form.appName"></el-input>
							</el-form-item>
						</el-col>
						<el-col :span="24">
							<el-form-item label="需求描述:">
								<el-input type="textarea" v-model="form.extMessage"></el-input>
							</el-form-item>
						</el-col>
					</el-row>
				</el-form>
			</div>
		</el-card>
		<el-card class="box-card tab-card">
			<div>
				<el-tabs v-model="tabActive" @tab-click="handleTabClick">
					<el-tab-pane label="页面/全局区块埋点" name="first" class="page-content">
						<el-row>
							<el-col :span="4" class="pic-module">
								<pic-upload-module :action="picUploadAction" :picInfo="picInfo"></pic-upload-module>
								<el-card class="tree-nav">
									<div slot="header">位置导航</div>
									<tree-menu class="tree-menu" :treeProps="treeProps" @nodeClick="handleNodeClick"></tree-menu>
								</el-card>
							</el-col>
							<el-col :span="20" class="page-list-module">
								<el-table size="mini" border :data="pageTableData" style="width: 100%; marginTop: 0"
													v-loading="pageTableLoading">
									<el-table-column
										prop="name"
										:show-overflow-tooltip="true"
										:sortable="false"
										label="埋点全称\标识">
										<template slot-scope="scope">
											<span>需求类型：
												<span :class="'requirement-type-' + scope.row.requirementType">
													{{$handleRequirementType(scope.row.requirementType) || "--"}}
												</span>
											</span><br/>
											<span>埋点名称：{{scope.row.trackName || "--"}}</span><br/>
											<span>埋点标识：{{scope.row.trackId || "--"}}</span>
										</template>
									</el-table-column>
									<el-table-column
										prop="pageDO"
										:show-overflow-tooltip="true"
										:sortable="false"
										label="位置信息">
										<template slot-scope="scope">
											<span>位置标识：{{scope.row.pageDO.pageId || "--"}}</span><br/>
											<span>位置名称：{{scope.row.pageDO.pageName || "--"}}</span><br/>
											<span>位置类型：{{$pageTypeObj[scope.row.pageDO.pageType] || "--"}}</span><br/>
											<span>页面类型：{{scope.row.pageDO.subType || "--"}}</span>
										</template>
									</el-table-column>
									<el-table-column
										prop="name"
										:show-overflow-tooltip="true"
										:sortable="false"
										label="说明">
										<template slot-scope="scope">
											<span>动作效果：{{scope.row.actionEffectName || "--"}}</span><br/>
											<span>埋点时机：{{scope.row.actionTypeName || "--"}}</span>
										</template>
									</el-table-column>
									<el-table-column
										prop="fieldAttributes"
										:show-overflow-tooltip="true"
										:sortable="false"
										min-width="140"
										label="已选属性">
										<template slot-scope="scope">
											<template v-for="(item, index) in scope.row.fieldAttributes">
												<span :key="index">
													{{item.propertyName || "--"}}/{{item.propertyId || "--"}}:{{item.remark || "--"}}
													<br/>
												</span>
											</template>
										</template>
									</el-table-column>
								</el-table>
								<el-pagination
									@size-change="handleSizePage"
									@current-change="handleCurrentPage"
									:current-page="pageSearch.currentPage"
									:page-sizes="[10, 20, 30, 40]"
									:page-size="pageSearch.pageSize"
									background
									layout="total, prev, pager, next, sizes, jumper"
									:total="pageSearch.total">
								</el-pagination>
							</el-col>
						</el-row>
					</el-tab-pane>
					<el-tab-pane label="无位置埋点" name="second" class="un-page-content">
						<div class="search">
							<el-input v-model="trackName" size="mini">
								<template slot="prepend">埋点全称</template>
								<el-button slot="append" icon="el-icon-search" @click="handleSearchNoPage"></el-button>
							</el-input>
						</div>
						<el-table size="mini" border :data="noPageTableData" style="width: 100%" v-loading="noPageTableLoading">
							<el-table-column
								v-for="item in noPageColumns"
								:show-overflow-tooltip="true"
								:sortable="item.sortable"
								:min-width="item.width"
								:key="item.prop"
								:prop="item.prop"
								:label="item.label">
								<template slot-scope="scope">
									<span
										v-if="item.prop === 'requirementType'"
										:class="'requirement-type-' + scope.row.requirementType">
										{{$handleRequirementType(scope.row.requirementType) || "--"}}
									</span>
									<span v-else>
										{{scope.row[item.prop] || "--"}}
									</span>
								</template>
							</el-table-column>
							<el-table-column
								prop="fieldAttributes"
								:show-overflow-tooltip="true"
								:sortable="false"
								min-width="140"
								label="已选属性">
								<template slot-scope="scope">
									<span v-for="(item, index) in scope.row.fieldAttributes" :key="index">
										<span>{{item.propertyName}}/{{item.propertyId}}:{{item.remark}}</span><br/>
									</span>
								</template>
							</el-table-column>
						</el-table>
						<el-pagination
							@size-change="handleSizeNoPage"
							@current-change="handleCurrentNoPage"
							:current-page="noPageSearch.currentPage"
							:page-sizes="[10, 20, 30, 40]"
							:page-size="noPageSearch.pageSize"
							background
							layout="total, prev, pager, next, sizes, jumper"
							:total="noPageSearch.total">
						</el-pagination>
					</el-tab-pane>
				</el-tabs>
			</div>
		</el-card>
		<bury-form-module :info="dialogInfo"></bury-form-module>
	</div>
</template>

<script>
	export default {
		name: "needDetail",
		data() {
			return {
				id: null,
				requirementId: null,
				stepActive: 2,
				form: {},
				versionList: [],
				dialogInfo: {
					requirementId: null,
					type: null
				},
				tabActive: "first",
				tabCount: 0,
				treeProps: {
					data: [],
					action: []
				},
				trackName: "",
				pageId: null,
				sdkType: null,
				pageColumns: [
					{
						prop: "event",
						label: "埋点全称\\标识",
						width: 100,
					},
					{
						prop: "page",
						label: "埋点全称\\标识",
						width: 100,
					},
					{
						prop: "desc",
						label: "说明",
						width: 100
					},
					{
						prop: "fieldAttributes",
						label: "已选属性",
						width: 140
					}
				],
				noPageColumns: [
					{
						prop: "trackName",
						label: "埋点全称",
						width: 100,
					},
					{
						prop: "trackId",
						label: "埋点标识",
						width: 100,
					},
					{
						prop: "eventId",
						label: "事件类型",
						width: 100
					},
					{
						prop: "eventName",
						label: "事件类型显示名",
						width: 100
					},
					{
						prop: "requirementType",
						label: "需求类型",
						width: 100
					},
				],
				pageTableData: [],
				noPageTableData: [],
				pageTableLoading: false,
				noPageTableLoading: false,
				pageSearch: {
					currentPage: 1,
					pageSize: 10,
					total: 0
				},
				noPageSearch: {
					currentPage: 1,
					pageSize: 10,
					total: 0
				},
				picUploadAction: [],
				picInfo: {
					url: "",
					iconPosition: []
				}
			}
		},
		created() {
			let {id} = this.$route.params;
			this.id = unescape(id);
			this.handleQueryRequirement();
		},
		mounted() {
		},
		methods: {
			// 查询位置导航
			async handleQueryPageNavigate() {
				let data = {
					requirementId: this.requirementId
				};
				let res = await this.$pageApi.pageNavigate(data);
				if (res) {
					let {pageNavigateList} = res.value;
					this.treeProps.data = this.dataToTree(pageNavigateList);
					if (pageNavigateList.length > 0) {
						this.handleQueryPage(pageNavigateList[0].id);
						this.pageId = pageNavigateList[0].pageId;
						this.sdkType = pageNavigateList[0].sdkType;
						this.handleQueryEventList();
					}
				}
			},
			// 渲染steps
			handleStepTitle(item) {
				if (item.key < this.stepActive) {
					return "已完成";
				} else if (item.key === this.stepActive) {
					return "进行中";
				} else {
					return "待进行";
				}
			},
			// 查询详情
			async handleQueryRequirement() {
				let data = {
					id: this.id
				}
				let res = await this.$requirementApi.requirementQuery(data);
				if (res) {
					let {requirementId, publicProperties, status, appId} = res.value;
					this.handleQueryVersionList(appId);
					this.requirementId = requirementId;
					publicProperties = publicProperties ? JSON.parse(publicProperties) : [];
					this.form = {
						...res.value,
						publicProperties: publicProperties
					}
					this.stepActive = status;
					this.handleQueryPageNavigate();
				}
			},
			// 版本列表
			async handleQueryVersionList(appId) {
				let data = {
					appId
				};
				let res = await this.$requirementApi.versionList(data);
				if (res) {
					let {list} = res.value;
					this.versionList = list;
				}
			},
			// 公共属性：打开dialog
			handleOpenDialog() {
				this.dialogInfo = {
					requirementId: this.requirementId,
					type: "dialog",
					publicProperties: this.form.publicProperties || [],
				}
			},
			// tab切换
			handleTabClick(tab) {
				let {name} = tab;
				this.tabActive = name;
				if (this.tabCount === 0) {
					this.handleQueryEventList();
					this.tabCount++;
				}
			},
			// 树形导航
			handleNodeClick(obj) {
				this.handleQueryPage(obj.id);
				this.tabActive = "first";
			},
			// 查询页面
			async handleQueryPage(id) {
				let res = await this.$pageApi.pageQuery({
					id
				});
				if (res) {
					let {pageId, sdkType, imageUrl, iconPosition} = res.value;
					this.pageId = pageId;
					this.sdkType = sdkType;
					this.picInfo = {
						url: imageUrl,
						iconPosition: iconPosition || []
					}
					this.handleQueryEventList();
				}
			},
			// 查询无位置埋点
			handleSearchNoPage() {
				this.noPageSearch.currentPage = 1;
				this.handleQueryEventList();
			},
			// 查询埋点列表
			async handleQueryEventList() {
				let data = {
					pageId: this.pageId,
					sdkType: this.sdkType,
					requirementId: this.requirementId,
				};
				if (this.tabActive === "first") {
					this.pageTableLoading = true;
					let {currentPage, pageSize} = this.pageSearch;
					data.currentPage = currentPage;
					data.pageSize = pageSize;
					data.pageId = this.pageId;
					data.sdkType = this.sdkType;
				} else {
					this.noPageTableLoading = true;
					let {currentPage, pageSize} = this.noPageSearch;
					data.currentPage = currentPage;
					data.pageSize = pageSize;
					data.trackName = this.trackName;
					data.hasPosition = true;
				}
				try {
					let res = await this.$eventApi.eventList(data);
					if (res) {
						let {list, total} = res.value;
						if (this.tabActive === "first") {
							this.pageTableData = list;
							this.pageSearch.total = total;
						} else {
							this.noPageTableData = list;
							this.noPageSearch.total = total;
						}
					}
					this.pageTableLoading = false;
					this.noPageTableLoading = false;
				} catch (e) {
					this.pageTableLoading = false;
					this.noPageTableLoading = false;
				}
			},
			handleSizePage(size) {
				this.pageSearch.currentPage = 1;
				this.pageSearch.pageSize = size;
				this.handleQueryEventList();
			},
			handleCurrentPage(page) {
				this.pageSearch.currentPage = page;
				this.handleQueryEventList();
			},
			handleSizeNoPage(size) {
				this.noPageSearch.currentPage = 1;
				this.noPageSearch.pageSize = size;
				this.handleQueryEventList();
			},
			handleCurrentNoPage(page) {
				this.noPageSearch.currentPage = page;
				this.handleQueryEventList();
			}
		},
		watch: {}
	}
</script>

<style lang="scss">
	.need-detail-container {
		.el-card__body {
			padding: 0;
		}

		.steps-content {
			padding: 20px;
			border-bottom: 1px solid #f1f1f1;

			.el-steps {
				/*width: 80%;*/
			}
		}

		.el-form {
			padding: 20px 20px 0 20px;
		}

		.tab-card {
			margin-top: 15px;

			.el-tabs {
				padding: 0 20px 10px 20px;
			}

			.un-page-content {
				.search {
					width: 350px;
				}
			}

			.page-content {
				.pic-module {
					position: relative;
					height: 300px;
					max-height: 500px;

					img {
						width: 100%;
					}

					&:hover .tree-nav {
						opacity: 1;
						-webkit-transform: translateX(100%);
						-moz-transform: translateX(100%);
						-ms-transform: translateX(100%);
						-o-transform: translateX(100%);
						transform: translateX(100%);
					}
				}

				.tree-nav {
					-webkit-box-sizing: border-box;
					-moz-box-sizing: border-box;
					box-sizing: border-box;
					position: absolute;
					top: 0;
					width: 120%;
					height: 100%;
					left: -120%;
					opacity: 0;
					-webkit-transition: all 1s;
					-moz-transition: all 1s;
					-ms-transition: all 1s;
					-o-transition: all 1s;
					transition: all 1s;
					overflow: auto;
					z-index: 2;
				}

				.page-list-module {
					padding-left: 10px;
				}
			}
		}
	}
</style>
